<template>
	<view class="new-users copy-data">
		<view class="mid" style="flex:1;overflow: hidden;">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="head my-order">

				<!-- 	<view class="order-wrapper">
						收益统计__日月
					</view> -->

			<!-- 	<view class="" style="display: flex;justify-content: end;">
					<view class='item'  @click="filtrate">
						<view><button type="primary" style="padding:3px 15px;">筛选</button></view>
						
					</view>
				</view> -->
	
				<view class='nav acea-row row-around' style="position: relative;">
					<view class='item' :class='orderStatus==1 ? "on": ""' @click="statusClick(1)">
						<view>{{$t("team.today-summary")}}</view>
						<!-- <view class='num'>{{orderData.completeCount || 0}}</view> -->
					</view>

					<view class='item' :class='orderStatus==2? "on": ""' @click="statusClick(2)">
						<view>{{$t("team.month-summary")}}</view>
						<!-- <view class='num'>{{orderData.completeCount || 0}}</view> -->
					</view>
				<view class='item'  @click="filtrate" style="position: absolute;right: 10px;">
							<view>
								<img src="@/static/images/fifter.png" alt="" style="width: 25px;height: 25px;;"/>
							</view>
							<!-- <view class='num'>{{orderData.completeCount || 0}}</view> -->
						</view>
				</view>
		
					<view class="team-wrapper" v-for="item in List">
						<view class="team_top" @click="goLook(item)">

							<view >
								<view class="flex_top">
									<view class="cash">{{item.createTime}}</view>
									<view class="info_detail">{{$t("public.detail-button")}}></view>
								</view>
								<view class="flex_top">
									<view class="cash">{{item.oneIncome}}</view>
									<view class="cash">{{item.twoIncome}}</view>
									<view class="cash">{{item.teamIncome}}</view>
								</view>
								<view class="flex_top">
									<view class="info_detail">{{$t("team.direct-extension-member")}}</view>
									<view class="info_detail">{{$t("team.intermittent-expansion")}}</view>
									<view class="info_detail">{{$t("user.team-income")}}</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>


					
			</scroll-view>
		
		</view>
<view>
				<u-calendar v-model="isShow" :mode="mode" style="width: 100%;" @change="changeDate" :start-text='startText' :end-text='endText' :toolTip='dateTip' :change-year='false'></u-calendar>
			</view>
	<!-- <u-popup v-model="isShow" mode="bottom" style="height: 300px;">
			
		</u-popup> -->

	</view>
</template>
<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import Cache from '@/utils/cache';
	import {
		BACK_URL
	} from '@/config/cache';
	import {
		getMenuList
	} from '@/api/user.js';
	import {
		orderData
	} from '@/api/order.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getCity
	} from '@/api/api.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef H5
	import {getUserStatistics,InfoByDate} from "@/api/new.js"
	import Auth from '@/libs/wechat';
	// #endif
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	const app = getApp();
	export default {
		components: {
			// #ifdef MP
			authorize
			// #endif
		},
		computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid']),
		data() {
			return {
				dateTip:this.$t('team.calendar.date'),
				startText:this.$t('team.calendar.start'),
				endText:this.$t('team.calendar.end'),
				mode:'range',
				showCalendar:true,
				showType:null,
				orderMenu: [{
						img: '/static/images/order1.png',
						title: this.$t('user.my-product'),
						url: '/pages/users/order_list/index?status=0',
						num: 0
					},
					{
						img: '/static/images/order2.png',
						title: '我的买单',
						url: '/pages/users/order_list/index?status=1',
						num: 0
					},
					{
						img: '/static/images/order3.png',
						title: '我的卖单',
						url: '/pages/users/order_list/index?status=2',
						num: 0
					},

				],
				activeTxt: 1,
				imgUrls: [],
				userMenu: [],
				autoplay: true,
				circular: true,
				interval: 3000,
				duration: 500,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				orderStatusNum: {},
				MyMenus: [],
				wechatUrl: [],
				servicePic: '/static/images/customer.png',
				sysHeight: sysHeight,
				// #ifdef MP
				pageHeight: '100%',
				// #endif
				// #ifdef H5
				pageHeight: app.globalData.windowHeight,
				// #endif
				// #ifdef H5
				isWeixin: Auth.isWeixin(),
				//#endif
				keyword: '',
				orderStatus: 1, //订单状态
				page: 1,
				limit: 20,
				type:1,
				List:[],
				isShow:false,
				
			}
		},
		onLoad(e) {
			let that = this;
			// #ifdef H5
			that.$set(that, 'pageHeight', app.globalData.windowHeight);
			// #endif
			console.log(e, 'eeeeeeee');
			// this.showType = e.type
			// if (e.type == 1) {	
			// 	uni.setNavigationBarTitle({
			// 		title: '直拓团队'
			// 	})
			// } else if (e.type == 2) {
			// 	uni.setNavigationBarTitle({
			// 		title: '间拓团队'
			// 	})
			// } else {
			// 	uni.setNavigationBarTitle({
			// 		title: '团队人数'
			// 	})
			// }

		},
		onShow: function() {
			let that = this;
			
			// 		uni.getSystemInfo({
			// 			success: function(res) {
			// 				that.pageHeight = res.windowHeight + 'px'
			// 			}
			// 		});
			let data = {
				dateLimit:'',
				type:this.type
			}
			getUserStatistics(data).then(res=>{
				console.log(res,'??????????');
				this.List = res.data
			})

		},
		methods: {
			goLook(e){
				// let time = e.createTime
				// let data = {
				// 	dateTime:e.createTime,
				// 	type:this.orderStatus
				// }
				// console.log(e,'item');
				// InfoByDate(data).then(res=>{
				// 	console.log(res,'nbbbbbbbbbbbbbbbb');
				// })
				uni.navigateTo({
					url:`./datTotal/day_detail?dateTime=${e.createTime}&type=${this.orderStatus}`
				})
			},
			changeDate(e) {
							console.log(e);
						},
			filtrate(){
				this.isShow = true
			},
			/**
			 * 切换类型
			 */
			statusClick: function(status) {
				if (status == this.orderStatus) return;
				this.orderStatus = status;
				this.loadend = false;
				this.page = 1;
				// this.$set(this, 'orderList', []);
				// this.getOrderList();
				let data = {
					dateLimit:'',
					type:status
				}
				getUserStatistics(data).then(res=>{
					console.log(res,'??????????');
					this.List = res.data
				})
			},
			goToDetail(){
				console.log('123');
				let id = 1
				uni.navigateTo({
					url:'/pages/users/order_list/buy_out?id='+id
				})
			},
			search() {

				console.log('搜索了', this.keyword);
			},
			clickDetail(e) {
				uni.navigateTo({
					url: '/pages/my_team/team_detail/index?type=' + e
				})
			},
			getTeam() {
				this.activeTxt = 1
			},
			getCash() {
				this.activeTxt = 2
			},

			goDetails(item) {
				uni.navigateTo({
					url: '/pages/users/user_address_list/index'
				})
			},

			getOrderData() {
				let that = this;
				orderData().then(res => {
					that.orderMenu.forEach((item, index) => {
						switch (item.title) {
							case '待付款':
								item.num = res.data.unPaidCount
								break
							case '待发货':
								item.num = res.data.unShippedCount
								break
							case '待收货':
								item.num = res.data.receivedCount
								break
							case '待评价':
								item.num = res.data.evaluatedCount
								break
							case '售后/退款':
								item.num = res.data.refundCount
								break
						}
					})
					that.$set(that, 'orderMenu', that.orderMenu);
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
	}
.my-order .nav {
		background-color: #fff;
		// width: 690rpx;
		// height: 140rpx;
		border-radius: 14rpx;
		// margin: -60rpx auto 0 auto;
	}

	.my-order .nav .item {
		text-align: center;
		// font-size: 26rpx;
		color: #282828;
		padding: 26rpx 0;
	}

	.my-order .nav .item.on {
		// font-weight: bold;
		// border-bottom: 5rpx solid #e93323;
		/* #ifdef H5 || MP */
		font-weight: bold;
		/* #endif */
		border-bottom: 5rpx solid $theme-color;
	}

	.my-order .nav .item .num {
		margin-top: 18rpx;
	}
	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 420rpx;
		background-image: url('~@/static/images/user_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.contenBox {
		// padding: 0 30rpx;
	}

	.left1 {
		color: #282828;
		font-size: 34rpx;
		font-weight: 600;
		margin: 5px 0;
	}

	.support {
		width: 219rpx;
		height: 74rpx;
		margin: 54rpx auto;
		display: block;
	}

	.title_top {
		display: flex;
		justify-content: center;
		align-items: center;

		.title_center {
			padding: 20px;
			// padding: 20px 0 0;
			font-size: 32rpx
		}
	}

	.new-users {
		
		display: flex;
		flex-direction: column;
		height: 100%;
		position: relative;
		
		
		
		
		
		.sys-head {
			position: relative;
			width: 100%;
			background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);

			.sys-title {
				z-index: 10;
				position: relative;
				height: 43px;
				text-align: center;
				line-height: 43px;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}

		.head {
			// background: linear-gradient(360deg, rgba(255, 121, 49, 0) 0%, rgba(248, 74, 29, 0.82) 39%, #E93323 100%);
			// padding: 0 30rpx;

			.user-card {
				position: relative;
				width: 100%;
				margin: 0 auto;

				// padding: 25rpx 0 0rpx 0;
				.user-info {
					z-index: 20;
					position: relative;
					display: flex;
					// align-items: center;
					padding: 0 0 16px;

					.avatar {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}

					.info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;
						// padding: 15rpx 0;

						.name {
							// display: flex;
							// align-items: center;
							color: #000;
							font-size: 31rpx;
							font-weight: bold;

							.vip {
								display: flex;
								align-items: center;
								padding: 6rpx 20rpx;
								background: rgba(0, 0, 0, 0.2);
								border-radius: 18px;
								font-size: 20rpx;
								margin-left: 12rpx;

								image {
									width: 27rpx;
									height: 27rpx;
								}
							}
						}

						.invite {
							display: flex;
							align-items: center;
							justify-content: space-between
						}

						.tit {
							font-size: 14px;
							color: #000;
							margin-right: 8px;
						}

						.num {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							// color: rgba(255, 255, 255, 0.6);

							image {
								width: 22rpx;
								height: 23rpx;
								margin-left: 20rpx;
							}
						}
					}

					.setting {
						width: 45rpx;
						height: 45rpx;
					}

				}

				.myBuy {
					font-size: 16px;
					font-weight: bold;
					margin: 10px 5px 0;
				}


				.sign {
					z-index: 200;
					position: absolute;
					right: -12rpx;
					top: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120rpx;
					height: 60rpx;
					background: linear-gradient(90deg, rgba(255, 225, 87, 1) 0%, rgba(238, 193, 15, 1) 100%);
					border-radius: 29rpx 4rpx 4rpx 29rpx;
					color: #282828;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.num-wrapper {
				z-index: 30;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20;
				color: #fff;
				// background: rgba(248, 74, 29, 0.82) ;
				background-image: url('~@/static/images/user_bg.png');
				background-repeat: no-repeat;
				background-size: 100% 150%;

				// padding: 2px 5px 20px;
				border-radius: 15px;

				.num-item {
					width: 50%;
					text-align: center;
					padding: 0 0 10px;

					.num {
						font-size: 42rpx;
						font-weight: bold;


						// 123
					}

					.txt_flex {
						display: flex;
						padding: 0 5px;
						justify-content: space-between;

						.txt {
							margin-top: 10rpx;
							font-size: 26rpx;
							color: rgba(255, 255, 255, 0.6);
						}

						.txt_right {
							font-size: 26rpx;
							color: #169bd5;
						}
					}

					.flex_btn {
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 0 5px;

						.num {
							margin-bottom: 8px;
						}

					}

					.txt_btn {
						display: flex;
						flex-direction: column;
						align-items: center;
						// padding: 0 5px;
						padding: 15px 0 0px;

						.num {
							margin-bottom: 8px;
						}
					}
				}
			}

			.left {
				color: #282828;
				font-size: 34rpx;
				font-weight: 600;
				margin: 5px 0;
			}

			.order-wrapper {
				background-color: #fff;
				border-radius: 14rpx;
				padding: 20rpx;
				margin: 15px 0 0;

				// position: relative;
				// z-index: 11;
				.uni-column {
					display: flex;

				}

			}
			

			.team_txt {
				padding: 20px 10px 0;
				display: flex;
				font-size: 24px;
				font-weight: bold;

				.team {
					margin-right: 25px;
				}

				.fifter {
					opacity: 0.5;
				}
			}

			.team-wrapper {
				background-color: #fff;
				// border-radius: 14rpx;
				padding: 0 32rpx 16rpx;
				margin: 10px 0;

				.team_top {
					display: flex;
					flex-direction: column;
					justify-content: start;
					// padding: 15px 0 0;

					.top_box {
						display: flex;

						.img {
							background-color: aqua;
							width: 35px;
							height: 35px;
							margin-right: 10px;
						}
					}

					.flex_top {
						display: flex;
						justify-content: space-between;
						width: 100%;
						align-items: center;

						// padding-bottom: 15px;
						.cash {
							font-weight: bold;
							padding: 10px 0
						}

						.info_detail {
							color: #aaa;
						}
					}

					.cash_num {
						padding: 10px;

						.price {
							margin-bottom: 14px;
							font-weight: bold;
							font-size: 18px;
						}
					}



				}
			}
		}

		.slider-wrapper {
			margin: 20rpx 0;
			height: 138rpx;

			swiper,
			swiper-item {
				height: 100%;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.user-menus {
			background-color: #fff;
			border-radius: 14rpx;

			.menu-title {
				padding: 30rpx 30rpx 40rpx;
				font-size: 30rpx;
				color: #282828;
				font-weight: 600;
			}

			.list-box {
				display: flex;
				flex-wrap: wrap;
				padding: 0;
			}

			.item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: column;
				width: 25%;
				margin-bottom: 47rpx;
				font-size: 26rpx;
				color: #333333;

				image {
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 18rpx;
				}


				&:last-child::before {
					display: none;
				}
			}

			button {
				font-size: 28rpx;
			}
		}

		.phone {
			color: #fff;
		}

		.order-status-num {

			min-width: 12rpx;
			background-color: #fff;
			color: #ee5a52;
			border-radius: 15px;
			position: absolute;
			right: -14rpx;
			top: -15rpx;
			font-size: 20rpx;
			padding: 0 8rpx;
			border: 1px solid #ee5a52;
		}
	}
</style>